<script type="text/javascript">
    $(document).ready(function () {
        var style = 'easeOutExpo';
        var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
        var default_top = $('#menu li.selected').height();

        //Set the default position and text for the tooltips
        $('#box').css({left: default_left, top: default_top});
        $('#box .head').html($('#menu li.selected').find('img').attr('alt'));				
		
        //if mouseover the menu item
        $('#menu li').hover(function () {
			
            left = Math.round($(this).offset().left - $('#menu').offset().left);

            //Set it to current item position and text
            $('#box .head').html($(this).find('img').attr('alt'));
            $('#box').stop(false, true).animate({left: left},{duration:500, easing: style});	

		
            //if user click on the menu
        }).click(function () {
			
            //reset the selected item
            $('#menu li').removeClass('selected');	
			
            //select the current item
            $(this).addClass('selected');
	
        });
		
        //If the mouse leave the menu, reset the floating bar to the selected item
        $('#menu').mouseleave(function () {

            default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);

            //Set it back to default position and text
            $('#box .head').html($('#menu li.selected').find('img').attr('alt'));				
            $('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
			
        });
		
    });
</script>
<script type="text/javascript"> 
    $(document).ready(function(){
 
        $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	
        $("ul.topnav li span").click(function() { //When trigger is clicked...
		
            //Following events are applied to the subnav itself (moving subnav up and down)
            $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
 
            $(this).parent().hover(function() {
            }, function(){	
                $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
            });
 
            //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() { 
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){	//On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
        });
 
    });
</script>
<div id="topbar">
    <div id="logo"><a href="index.php"><img src="assets/images/logo.png" width="156" height="73" alt="UUGU TEAM官网" /></a></div>
    <div id="socialbar">
        <div id="menu">
            <ul>
                <li><a href="#"><img src="assets/images/i1.png" width="33" height="33" alt="RSS Feed" title=""/></a></li>
                <li><a href="#"><img src="assets/images/i2.png" width="33" height="33" alt="Projects" title=""/></a></li>		
                <li class="selected"><a href="<{spUrl c=contactus a=show_message}>"><img src="assets/images/i3.png" width="32" height="32" alt="Message" title=""/></a></li>
            </ul>
            <!-- If you want to make it even simpler, you can append these html using jquery -->
            <div id="box"><div class="head"></div></div>
        </div></div>
</div>
<div id="nav"><ul class="topnav">
        <li><a href="index.php">Home</a></li>
        <li>
            <a href="<{spUrl c=news a=index item=1}>">News</a>
            <ul class="subnav">
                <li><a href="<{spUrl c=news a=index item=1}>">Our News</a></li>
                <li><a href="<{spUrl c=news a=index item=2}>">Our Notice</a></li>
            </ul>
        </li>
        <li>
            <a href="<{spUrl c=article}>">Article</a>
            <ul class="subnav">
                <li><a href="<{spUrl c=article a=index item=1}>">Tech Articles</a></li>
                <li><a href="<{spUrl c=article a=index item=2}>">Design Articles</a></li>
            </ul>
        </li>
        <li>
            <a href="<{spUrl c=service}>">Service</a>
            <ul class="subnav">
                <li><a href="<{spUrl c=projects}>">Projects</a></li>
                <li><a href="#">Web Invade</a></li>
                <li><a href="#">Virus Marking</a></li>
            </ul>
        </li>        
        <li><a href="<{spUrl c=contactus}>">Contact</a>
            <ul class="subnav">
                <li><a href="<{spUrl c=contactus}>">Submit Demands</a></li>
                <li><a href="<{spUrl c=contactus a=show_message}>">Leave Message</a></li>
            </ul>
        </li>
        <li>
            <a href="<{spUrl c=aboutus}>">About us</a>
            <ul class="subnav">
                <li><a href="<{spUrl c=joinus}>">Join us</a></li>
                <li><a href="<{spUrl c=aboutus}>">The Team</a></li>
                <li><a href="<{spUrl c=aboutus a=rules}>">Our Rules</a></li>
                <li><a target="_blank" href="http://chenzhiguo.cn">Our Leader</a></li>
            </ul>
        </li>        
    </ul>
</div>